[#ftl]
[#compress]
[#include "util10.ftl"/]
<!DOCTYPE html>
[@shrinksafe key="home" cached=shrinkCached shrink=shrink contentType="html"]
[#if applicationMode = "PROD"]
<html manifest="index1CacheManifest.manifest">
[#else]
<html>
[/#if]
<head>
<!--Beyond Prototype build version at ${.now}-->
	[@htmlMeta/]
	
	<style type="text/css">[#include "indexCss.ftl"/]</style>

	<script type="text/javascript">
	[@funcCreateIframe/]	
	var cache = window.applicationCache;
	if(cache){
	  cache.addEventListener('updateready', function(e) {
		  cache.swapCache();				
		  	window.location.reload();	
	  }, false);
	}
	</script>
</head>
<body class="claro bp_theme" style="background-color:white;font:12px Myriad,Helvetica,Tahoma,Arial,clean,sans-serif">

<div style="margin:auto;top:0px;left:0px;bottom:0px;right:0px;text-align:left;width:100%;max-width:1024px;overflow:hidden" class="main_sec">	
	<div class="main_logo">	
		<table>
			<tr>
			<td>[@logo/]</td>
			<td width="10em"></td>
			<td nowrap>			
			<span style="font-size:3em;font-style:italic;text-decoration:underline;color:#808080;cursor:pointer" 
				[#if applicationMode = "DEV"]
					onClick="window.open('/v/prototype10/index')"
				[#else]
					onClick="window.open('/prototype10/index.html')"					
				[/#if]							
			>
			try it free now
			</span>	
				<div style="font-size:1.0em;font-style:italic;display:inline" id="warningMsg"></div>
			</td>
			</tr>
		</table>
		<div class="main_dummy" style="color:#0000ff;font-size:1.8em;font-style:italic;text-indent:3em;width:100%;display:none">
			Loading...please wait
		</div>
	</div>
				<div class="bp_headline">Reusable prototypes, high efficiency, low cost.</div>
				
				<div class="bp_content" style="margin:0.2em 0em 0.4em 0em;font-size:1.8em;">						
					Create high-fidelity interactive prototypes without coding, 
					eliminate gaps between prototypes and real applications,
					significantly improve delivery efficiency.
				</div>	
				
				[@overview "Overview" "0%" "100%"]
				Beyond Prototype is an online tool to create  high-fidelity full-interactive resuable prototype for website and application. 
				Besides, source codes can be generated from the prototype and they can be reused directly at development phase.
				Beyond Prototype works perfectly on any morden browser which supports HTML5 Web Storage 
				e.g. IE 10+, Firefox 38+, Safari 8+, Opera 32+,Chrome 24+. 
				
				<div>
				<div style="display:inline" class="bp_icon bp_browser1 bp_scale"></div>
				<div style="display:inline" class="bp_icon bp_browser2 bp_scale"></div>
				</div>
				<br/><br/>
				<b>Beyond Prototype is Highly Available anytime using HTML5 offline mode</b>
				<div style="height:1em;width:100%"></div>
				[/@]
				
				 [@overview "Features" "0%" "100%"]
				 	[@feature "Built On New Technologies"]				 		
				 		<div>
				 		Beyond prototype is built on preferred web technologies like HTML5, CSS3 and DOJO, 
				 		the same to the prototype that it creates.
				 		</div>
				 		<div class="bp_icon bp_technology bp_scale"></div>
				 	[/@]	
				 
				 	[@feature "One Click, Available Anytime"]				 		
				 		It is as convenient as just one click to start using Beyond Prototype. 
				 		No tedious installation steps are required, however it can be used anytime no matter there is network connection or not.				 		
				 	[/@]	
				 
				 	[@feature "Evergreen, Automatic Upgrade"]
				 		Beyond Prototype can automatically upgrade to the latest version as long as network connection is available when it starts up.				 		
				 	[/@]	
				 
				 	[@feature "Data Privacy"]
				 		Beyond Prototype will not store any data including the prototype you create on its server, 
				 		all data are stored in the browser's local storage on your own device. <!-- unless you share the prototype to your team, 
				 		in which case the prototype will be stored in its database and published to you team.-->
				 		
				 	[/@]	
				 
				 	[@feature "What You See Is What You Get"]
					 	Beyond Prototype provides lots of UI widgets which are full-interactive, you can customize the widgets properties,
					 	interactions and look & feel anytime and preview the effects immediately. 
					[/@]	
					
					[@feature "Reusable Source Code"]
						Beyond Prototype generates the standard HTML / CSS / DOJO source codes from the prototype, 
						these codes can be used directly at the application development phase. 
						You not just create a prototype, you create the real application from the beginning.
						
					[/@]					
				[/@]
				
				[@overview "Risk" "0%" "100%"]
				 	<div class="content_title">Risk Management</div>
					<div class="bp_icon bp_risk"></div>
					Rapid prototyping can focus on the key risk factors and adjust to them based on empirical evidence collected early on in the project life-cycle.
					This can provide valuable information as to the feasibility of a design and can prevent the team from pursing solutions that turn out to be too complex or time consuming to implement. 
					The earlier a problem can be found the cheaper it is to address, and the less risky	the project would be.				
				[/@]
				 
				[@overview "Quality" "0%" "100%"]
				<div class="content_title">Quality</div>
				<div class="bp_icon bp_quality"></div>
				Users are more comfortable in using and reacting than abstractly defining how the system should behave, 
				they can provide much more useful feedbacks when they can interact with a prototype of the running system,
				and there is a better chance to build more usable system that focus on business problems that are critical to end users.		   
				[/@]
				 
				 [@overview "Productivity" "0%" "100%"]
					<div class="content_title">Productivity</div>
				    <div class="bp_icon bp_productivity"></div>
					Green web UI technologies are evolving almost everyday, Beyond Prototype can save your time to learn and use them from the beginning, 
					all you need to do is just to drag & drop the web component you need and customize its look & feel in the prototype.
					Besides,the prototype is created by pure DOJO,HTML5,CSS3 codes that can be reused at the construction phase of the project life-cycle, 											 							
				    so there are better chances to complete your projects on time and within budget.												
				 [/@]
				
				[@overview "Beyond ..." "0%" "100%"]
				  <div class="content_title">Beyond ...</div>
					 <div class="bp_icon bp_engineering"></div>
					Beyond Prototype itself is evolving, besides enriching its web components,we are extending its functionalities as a RIA development platform.
					For any consultancy,please send mail to <span style="color:blue;font-style:italic"> beyondprototype@126.com</span>
				[/@]
					
				<div style="font-size:1.2em;border:0px;text-align:center;padding:0px;margin:0px 0px 4px 0px">
					Copyright &copy; 2018 Beyond Prototype. All Rights Reserved.
					[#--Contact us at <span style="color:blue;font-style:italic"> beyondprototype@126.com</span>--]					
				</div>
</div>

<script type="text/javascript">window["_createIframe"]("[#if applicationMode = "PROD"]/prototype10/index1Shadow.html[#else]/v/prototype10/index1Shadow[/#if]")</script>
</body>
</html>
[/@]
[/#compress]

[#macro overview title left width last=false]
[#compress]
[#--if title != ""]
<div class="content_title" style="color:#808080;border-bottom:1px dashed;">${title}</div>
[/#if--]
<div class="bp_content">
[#nested]
</div>	
[/#compress]
[/#macro]

[#macro feature title columns=3]
[#compress]
<div style="display:inline-table;width:calc(96% / ${columns});min-width:calc(960px / ${columns});border:0px solid;margin:0.2em">
<div class="content_title" style="color:#808080;border-bottom:1px dashed;">${title}</div>
<div class="f_content">
	[#nested]  
</div>
</div>
[/#compress]
[/#macro]